import { useCallback, useEffect, useMemo, useState } from 'react';
import { Card, Button, Space, Table, Modal } from "antd";
import { deletePrinterInfo, updatePrinterInfo, addPrinterInfo } from "../api/printer";
import Message from '@/components/Message';
import PrinterForm from '../components/PrinterForm';
import { state as states } from "@/stores/Merchant"
import { useSnapshot } from 'valtio'
import { shop } from "../types/shop"
const Printer = ({obj}:any) => {
    let state = useSnapshot(states)
    interface FormItem {
        _id?: string,
        shopname: string, //店铺名称
        printername: string, //打印机名称
        printertype: string, //选择打印机类型
        printerIP: string, //打印机IP
        terminal: string, //设备终端号 
        terminalkey: string, //终端密钥
        printertemplate: string, //打印模板,
        printsize: string, //打印尺寸,
        printmuch: string, //打印份数,
        notes: string, //备注
        autoprint: boolean, //自动打印
    }

    const [form, setForm] = useState<FormItem>({ 
        shopname: state.shopName, //店铺名称
        printername:"", //打印机名称
        printertype:"", //选择打印机类型
        printerIP:"", //打印机IP
        terminal:"", //设备终端号 
        terminalkey:"", //终端密钥
        printertemplate:"", //打印模板,
        printsize:"", //打印尺寸,
        printmuch:"", //打印份数,
        notes:"", //备注
        autoprint:false, //自动打印
     });


    const [printerName, setPrinterName] = useState("");
    const [modalShow, setModalShow] = useState(false);
    const [show, setShow] = useState(false);
    const [selectedPrinter, setSelectedPrinter] = useState<any>(null);
    const [modalShow2, setModalShow2] = useState(false);
    const bindData = useMemo(() => {
        
        return state.printerList.filter((item: any) => item.shopname === state.shopName)
    }, [state.shopName])




    const fetchPrinterList = useCallback(() => {
        state.getData7({ printerName })


    }, []);

    useEffect(() => {
        state.getData7({})
    }, []);


    const handleAdd = () => {
        addPrinterInfo(form).then((res: any) => {
            if (res.code === 200) {
               
                fetchPrinterList();
            }
        });
    };

    const handleUpdate = () => {
        updatePrinterInfo(form).then((res: any) => {
            if (res.code === 200) {
              
                fetchPrinterList();
            }
        });
    };
    //  删除品牌
    const handleDelete = () => {
        deletePrinterInfo(selectedPrinter).then((res: any) => {
            if (res.code === 200) {
                fetchPrinterList();
            }
        });
    };

    let columns = [
        {
            title: "打印机名称",
            dataIndex: 'printername',
            key: 'printername',
        },
        {
            title: "打印机类型",
            dataIndex: 'printertype',
            key: 'printertype',
        },
        {
            title: "打印张数",
            dataIndex: 'printmuch',
            key: 'printmuch',
        },
        {
            title: "打印尺寸",
            dataIndex: 'printsize',
            key: 'printsize',
        },
        {
            title: "打印模板",
            dataIndex: 'printertemplate',
            key: 'printertemplate',
        },
        {
            title: "打印机IP地址",
            dataIndex: 'printerIP',
            key: 'printerIP',
        },
        {
            title: "设备终端号",
            dataIndex: 'terminal',
            key: 'terminal',
        },
        {
            title: "设备终端秘钥",
            dataIndex: 'terminalkey',
            key: 'terminalkey',
        },
        {
            title: "操作",
            render: () => (
                <Space size="middle">

                    <a onClick={() => {
                       
                    }}>打印机绑定</a>
                </Space>
            ),
        },
        {
            title: "操作",
            render: (_: any, record:any) => (
                <Space size="middle">

                    <a onClick={() => {
                        setForm(record);
                        setModalShow(true);
                    }}>编辑</a>
                    <a onClick={() => {
                        setSelectedPrinter(record);
                        setShow(true);
                        setPrinterName(record.printername);
                    }}>删除</a>
                </Space>
            ),
        },


    ]

    const info = {
        headTitle: "删除品打印机确认",
        bodyTitle: `请确认是否删除[${printerName}]打印机！`,
        bodyContent: "删除打印机确认~",
    };

    return (
        <div className='m=auto w-[100%] m-t-5'>
            <Message info={info} show={show} setShow={setShow} callBack={handleDelete} />
            <Card title='店铺信息' className='m-auto  w-[90%] rounded-none ' >
                <div className='flex justify-between w-80 '>
                    <p>{obj.shopName}</p>
                    <p>{obj.areaName}</p>
                    <p>{obj.brandname}</p>
                </div>
            </Card >

            <Card className='w-[90%] m-auto mt-5 rounded-none'>
                <div className='flex justify-between items-center'>
                    <p>共有{state.printerList.length}条记录</p>

                    <Button
                        className='rounded-none'
                        type='primary'
                        onClick={() => {
                            setModalShow(true)
                            setForm(
                                {
                                    shopname:state.shopName,
                                    printername: "", //打印机名称
                                    printertype: "", //选择打印机类型
                                    printerIP: "", //打印机IP
                                    terminal: "", //设备终端号
                                    terminalkey: "", //终端密钥
                                    printertemplate: "", //打印模板,
                                    printsize: "", //打印尺寸,
                                    printmuch: "", //打印份数,
                                    notes: "", //备注
                                    autoprint: false, //自动打印
                                }
                            );
                        }}
                    >
                        添加打印机
                    </Button>
                </div>
                <Table
                    className='rounded-none'
                    columns={columns}
                    dataSource={bindData}
                    pagination={{
                        defaultPageSize: 5,
                        total: bindData.length,
                        showSizeChanger: true,
                        pageSizeOptions: ['5', '10', '20'],
                    }}
                />
            </Card>

            <Modal
                style={{ borderRadius: 0 }}
                title="添加添加打印机"
                centered
                open={modalShow}
                footer={[
                    <Button key="back" onClick={() => {
                        setModalShow(false);
                    }}>取消</Button>,
                    <Button key="submit" type="primary" onClick={() => {
                        setModalShow(false);
                        if (form._id) {
                            handleUpdate();
                        } else {
                            handleAdd();
                        }
                    }}>
                        确认
                    </Button>
                ]}
                onCancel={() => {
                    setModalShow(false);
                }}
            >
                <PrinterForm form={form} setForm={setForm} />
            </Modal>
            <Modal
                width={900}
                centered
                open={modalShow2}
                onOk={() => {
                    setModalShow2(false)
                }}
                onCancel={() => {
                    setModalShow2(false)

                }}
                footer={""}
            >
                <Table className='rounded-none m-t-10'
                    columns={shop}
                    dataSource={bindData}
                    bordered
                    pagination={{
                        defaultPageSize: 5, // 设置每页默认显示的行数
                        total: bindData.length,
                        showSizeChanger: true, // 不显示每页显示数量的选择器
                        showQuickJumper: false, // 不显示快速跳转到某一页的输入框
                        pageSizeOptions: ['5', '10', '20'],
                    }}
                />
            </Modal>
        </div>
    );
};

export default Printer;
